<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="header one">
        <div class="nav one">
            <h3 class="active">手机</h3>
            <h3>电脑</h3>
            <h3>平板</h3>
        </div>
        <div class="box one">
            <ul class="active">
                <li>HUAWEI P50</li>
                <li>HUAWEI Mate X2</li>
                <li>HUAWEI Mate Xs 2</li>
                <li>HUAWEI nova 9 Pro</li>
                <li>HUAWEI P50E</li>
                <li>HUAWEI nova 10 Pro</li>
            </ul>
            <ul>
                <li>HUAWEI MateBook X</li>
                <li>HUAWEI MateBook X Pro</li>
                <li>HUAWEI MateBook 14s</li>
                <li>HUAWEI MateBook 13</li>
                <li>HUAWEI MateBook 13s</li>
                <li>HUAWEI MateBook D</li>
            </ul>
            <ul>
                <li>HUAWEI MatePad Pro 12.6英寸</li>
                <li>HUAWEI MatePad Pro 10.8英寸</li>
                <li>HUAWEI MatePad 11</li>
                <li>HUAWEI MatePad</li>
                <li>HUAWEI MateBook E</li>
                <li>HUAWEI MatePad SE</li>
            </ul>
        </div>
    </div>
    <div class="header two">
        <div class="nav two">
            <h3 class="active">手机</h3>
            <h3>电脑</h3>
            <h3>平板</h3>
        </div>
        <div class="box two">
            <ul class="active">
                <li>HUAWEI P50</li>
                <li>HUAWEI Mate X2</li>
                <li>HUAWEI Mate Xs 2</li>
                <li>HUAWEI nova 9 Pro</li>
                <li>HUAWEI P50E</li>
                <li>HUAWEI nova 10 Pro</li>
            </ul>
            <ul>
                <li>HUAWEI MateBook X</li>
                <li>HUAWEI MateBook X Pro</li>
                <li>HUAWEI MateBook 14s</li>
                <li>HUAWEI MateBook 13</li>
                <li>HUAWEI MateBook 13s</li>
                <li>HUAWEI MateBook D</li>
            </ul>
            <ul>
                <li>HUAWEI MatePad Pro 12.6英寸</li>
                <li>HUAWEI MatePad Pro 10.8英寸</li>
                <li>HUAWEI MatePad 11</li>
                <li>HUAWEI MatePad</li>
                <li>HUAWEI MateBook E</li>
                <li>HUAWEI MatePad SE</li>
            </ul>
        </div>
        <button>下一项</button>
    </div>
    <div class="header there">
        <div class="nav there">
            <h3 class="active">手机</h3>
            <h3>电脑</h3>
            <h3>平板</h3>
        </div>
        <div class="box there">
            <ul class="active">
                <li>HUAWEI P50</li>
                <li>HUAWEI Mate X2</li>
                <li>HUAWEI Mate Xs 2</li>
                <li>HUAWEI nova 9 Pro</li>
                <li>HUAWEI P50E</li>
                <li>HUAWEI nova 10 Pro</li>
            </ul>
            <ul>
                <li>HUAWEI MateBook X</li>
                <li>HUAWEI MateBook X Pro</li>
                <li>HUAWEI MateBook 14s</li>
                <li>HUAWEI MateBook 13</li>
                <li>HUAWEI MateBook 13s</li>
                <li>HUAWEI MateBook D</li>
            </ul>
            <ul>
                <li>HUAWEI MatePad Pro 12.6英寸</li>
                <li>HUAWEI MatePad Pro 10.8英寸</li>
                <li>HUAWEI MatePad 11</li>
                <li>HUAWEI MatePad</li>
                <li>HUAWEI MateBook E</li>
                <li>HUAWEI MatePad SE</li>
            </ul>
        </div>
    </div>
    <script>
        //   通过面向对象写选项卡 ？
        // 共性（封装）、
        // 5.挂载到原型上
        class Click {
            constructor(h3, ul){
                this.h3=h3;
                this.ul=ul;
                h3.forEach((item, index) => {
                item.onclick = () => {
                    this.paita(index);
                }
            })
            }

            // 写完下一项功能发现公用的就拿出来了
            paita(index) {
                this.ul.forEach((it, key) => {
                    // 排他思想
                    it.removeAttribute('class');
                    this.h3[key].removeAttribute('class');
                })
                this.h3[index].setAttribute('class', 'active');
                this.ul[index].setAttribute('class', 'active');

            }
            // 这里为什么不要return ？
            // 我挂到原型上 谁指向他就可以用不需要return
        }

        // 把共性问题 抽象成类 （构造函数 ）
        // 把特性问题方法实例上分别处理
        let h3s = document.querySelectorAll('.one h3');
        let uls = document.querySelectorAll('.one ul');
        new Click(h3s, uls);


        let h3s2 = document.querySelectorAll('.two h3');
        let uls2 = document.querySelectorAll('.two ul');

        let click2 = new Click(h3s2, uls2);
        // 个性问题 单独提取去写
        let button = document.querySelector('button');
        let count = 0;
        // button.onclick = () => {
        //     uls2.forEach((item, index) => {
        //         item.removeAttribute('class');
        //         h3s2[index].removeAttribute('class');
        //     })
        //     count >= 2 ? count = 0 : count++;
        //     h3s2[count].setAttribute('class', 'active');
        //     uls2[count].setAttribute('class', 'active');
        // }
        button.onclick = () => {
            count >= 2 ? count = 0 : count++;
            click2.paita(count);
        }

        let h3s3 = document.querySelectorAll('.there h3');
        let uls3 = document.querySelectorAll('.there ul');
        let click3 = new Click(h3s3, uls3);
        let num = 0;

        // 个性问题 单独提取去写
        // setInterval(()=>{
        //     uls3.forEach((item, index) => {
        //         item.removeAttribute('class');
        //         h3s3[index].removeAttribute('class');
        //     })
        //     num >= 2 ? num = 0 : num++;
        //     h3s3[num].setAttribute('class', 'active');
        //     uls3[num].setAttribute('class', 'active');
        // },1000)

        // 发现又是共性问题  就用了paita();
        setInterval(()=>{
            num >= 2 ? num = 0 : num++;
            click3.paita(num);
        },1000)


        

    </script>
</body>

</html>